<template>
    <div class="container_1">
        我是子组件
        <p>计数器正在运行...</p>
    </div>
</template>

<script setup>
import { ref,onMounted,onActivated, onUnmounted,onBeforeUnmount } from 'vue'
const emit = defineEmits(['updateCount']); // 定义 emit 事件
let timer1 = null; // 定义定时器
let timer2 = null; // 定义定时器
const count = ref(0); // 子组件内部计数


onMounted(() => {
    alert('组件挂载完成后')
    timer1 = setInterval(() => {
        count.value++; // 每秒增加计数
        emit('updateCount', count.value); // 向父组件发送更新的计数
    }, 1000);
    timer2 = setInterval(() => {
        alert('3秒')
    }, 3000);
})

onBeforeUnmount(() => {
  // 不清理定时器以演示错误行为
  console.log('不清理定时器');
});
onUnmounted(() => {
    alert('组件卸载之后')
    clearInterval(timer1); // 清理定时器
    clearInterval(timer2)
})
</script>

<style scoped>
.container_1 {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(235, 235, 235);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
</style>